<template>
	<view class="page">
		<view class="container">
		  <form>
		    <view class="container1">
		        <view class="visitorInfo">
		          <view class="view">
		            <view class="name2">{{language.familyManDetail.label1}}：</view>
					<u-input  :placeholder="language.familyManDetail.tip1" v-model="name"></u-input>	
			
		          </view>
		          <view class="view">
		            <view class="name2">{{language.familyManDetail.label2}}：</view>
						<input class="value" :disabled="true" :value="mobile" name="mobile" type="number" placeholder-style="font-size:15px;color:#E0E0E0;" />
		            <view>
		              <button  class="getCode" @click='isChangeTel=true'>{{language.familyManDetail.btn1}}</button>
		            </view>
		          </view>
		          <view class="view" v-if="isChangeTel">
		            <view class="name2">{{language.familyManDetail.label3}}：</view>
					<u-input  :placeholder="language.familyManDetail.tip2" v-model="newMobile"  type="number"></u-input>
		          </view>
		          <view class="view" v-if="isChangeTel">
		            <view class="name2">{{language.familyManDetail.label4}}：</view>
					<u-input  :placeholder="language.familyManDetail.btn2" v-model="code"  type="number"></u-input>
		            <view>
		              <button :disabled='disabledText' class="getCode" @click='GetCode'>{{timeText}}</button>
		            </view>
		          </view>
		
		          <view class='btnOperate' style="margin-top: 50px;">
		            <view>
		              <button  @click="formSubmit" class="">{{language.familyManDetail.btn3}}</button>
		            </view>
		          </view>
		        </view>
		    </view>
		  </form>
		  <view class="tips" >
		    <view class="text">{{language.familyManDetail.tip4}}：</view>
		    <view style="text-indent: 2em" class="text">{{language.familyManDetail.tip5}}</view>
		  </view>
		</view>
	</view>
</template>

<script>
	import {sendsmsApi,addOrUpdateApi,getParentApi} from '@/common/api/commonApi/phoneApi.js'
	let intervalText = ''
	export default {
		data() {
			return {
				submiting: false,
				mobile:'',
				newMobile: '',
				code:'',
				name: '',
				pageType: 2,//2 初中 1高中
				isFirstRegPhone: false,
				isChangeTel: false,
				timeText: '获取验证码', //倒计时
				currentTimeText: 61,
				disabledText: false,
				selectInfoAccount: uni.getStorageSync('selectInfoAccount'),
			}
		},
		methods: {
			formSubmit: function() {
			    console.log('表单')
				if (!this.name) {
				  return this.setMessage('家长姓名不能为空')
				}
				var data = {
				  usid: this.selectInfoAccount.id,
				  // usid: '1771107644199706625',//对应 用户USID
				  // xxbm: this.selectInfoAccount.departmentId,
				  xxbm: this.xxbm,
				  name: this.name,
				  mobile: this.mobile,
				  newMobile: this.newMobile,
				  code : this.code,
				}
				addOrUpdateApi(data).then(res=>{
					if (this.isFirstRegPhone) {
						uni.setStorageSync('isFirstRegPhone',false)
					  wx.showModal({
					    content: '人脸及信息已录入成功,请点击下一步到"v300校园通话"小程序进行设备授权，授权后才能使用微信语音、视频通话。',
					    showCancel: false,
					    confirmText: "下一步",
					    success: (res)=> {
					      if (res.confirm) {
					        wx.navigateToMiniProgram({
					          appId: 'wx2cfb61ccc8e0eb31',
					          path:'/pages/login/login',
					      　  envVersion: 'release',// 打开正式版
					          extraData:{
					            organization: '',
					            mobile: this.newMobile ? this.newMobile : this.mobile,   // 登录号码
					            jump2Type: 2,           // 1.学生列表 2.授权列表 3.留言列表
					          },
					          // envVersion:"trial"  // trial 体验版 正式版不需要加上
					        })
					      } else {
					      }
					    }
					  });
					}else{
						this.setMessage('操作成功')
					}
				})
				
			  
			  },
			GetCode: function(e) {
			      if (!this.newMobile) {
			        return this.setMessage('新手机号不能为空')
			      }else if(this.newMobile == this.mobile){
					return this.setMessage('手机号不是新的手机号')
			      } else {
			        var data = {
						// usid: this.selectInfoAccount.id,
						// studentid: '1771107644199706625',//对应 用户USID
						studentid: this.selectInfoAccount.id,//对应 用户USID
						// xxbm: this.selectInfoAccount.departmentId,
						xxbm: this.xxbm,
			          smstype: 2, //0绑定 1原变更号码 2新变更号码 3解绑 4在线申述变更
			          mobile: this.newMobile,
			        }
					sendsmsApi(data).then(res=>{
						this.disabledText = true
						 this.UpdateAfterTimeText();            
						this.setMessage('发送成功')
					})
			      }
			},
			  UpdateAfterTimeText: function() {
			    var that = this;
			    var currentTime = this.currentTimeText;
			    intervalText = setInterval(()=> {
			      currentTime--
			      this.timeText = currentTime + '秒'
			      if (currentTime <= 0) {
			        this.resetAfterTimeText()
			      }
			    }, 1000)
			  },
			  resetAfterTimeText: function() {
			    clearInterval(intervalText)
				this.timeText = '重新发送'
				this.currentTimeText = 61
				this.disabledText = false
			  },
			  getInfo: function () {
			    let that = this
				let data = {
					usid: this.selectInfoAccount.id,
					// usid: '1771107644199706625',
					// xxbm: this.selectInfoAccount.departmentId,
					xxbm: this.xxbm,
				}
				getParentApi(data).then(res=>{
					this.mobile = res.model.mobile
					this.name = res.model.name
				})
				
			    
			},
		},
		onLoad({isFirstRegPhone}) {
			this.setPageTitle(this.language.familyManDetail.title)
			this.timeText = this.language.familyManDetail.btn2
			this.isFirstRegPhone = isFirstRegPhone
			this.getInfo()
		},
		onShow() {
			
		},
	}
</script>

<style lang="scss" scoped>
.page{
	
}
page {
    height: 100%;
}

.container {
    font-size: 30rpx;
    font-weight: Arial;
}




.container1 {
    font-size: 30rpx;
    font-weight: Arial;
    padding: 12px 12px;
	background-color: #fff;
}

.visitorInfo {
    width: 100%;
    /* height: fit-content; */
    display: flex;
    flex-direction: column;
}

.visitorInfo .view {
    width: 100%;
    /* height: fit-content; */
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    border-bottom: 1px solid #eaeaea;
}

.visitorInfo .view .name {
    width: fit-content;
    /* height: fit-content; */
    color: red;
    margin-top: 12px;
    margin-bottom: 12px;
    margin-right: 3px;
}

.visitorInfo .view .name1 {
    width: fit-content;
    /* height: fit-content; */
    color: #bfbfc0;
    margin-top: 12px;
    margin-bottom: 12px;
    margin-right: 3px;
}

.visitorInfo .view .name2 {
    /* width: fit-content; */
    width: 180rpx;
    display: flex;
    /* height: fit-content; */
    color: black;
    margin-top: 12px;
    margin-bottom: 12px;
    margin-right: 3px;
    word-break:break-all;
}

.visitorInfo .view .value {
    width: fit-content;
    /* height: fit-content; */
    color: black;
    margin-top: 12px;
    margin-bottom: 12px;
    margin-left: 3px;
    float: right;
    flex-grow: 1;
}

.visitorInfo .view .view {
    height: auto;
    width: fit-content;
    display: flex;
    align-items: center;
    position: relative;
    /*启用相对定位*/
    float: right;
    overflow: hidden;
    justify-content: flex-end;
    flex-grow: 1;
}

.visitorInfo .view .view .value1 {
    width: fit-content;
    /* height: fit-content; */
    color: black;
    padding: 6px;
    margin-top: 12px;
    margin-bottom: 12px;
    margin-left: 3px;
    border-radius: 22rpx;
    background-color: #fff;
    border-color: #f4f4f4;
    border-width: 1rpx;
    border: lightgrey;
    border-style: solid;
}

.visitorInfo .view .image {
    width: 9px;
    float: right;
    margin: 0 12px;
}

.visitorInfo .view .image1 {
    width: 66px;
    height: 66px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    border-bottom: 1px solid #eaeaea;
}

textarea {
    width: 100%;
    height: 360rpx;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 3px;
    padding-right: 3px;
}

.btnOperate {
    margin-top: 10px;
}

.btnOperate>view {
    width: 100%;
    height: 45px;
    line-height: 45px;
    margin-left: auto;
    margin-right: auto;
}

.btnOperate>view:nth-child(1)>button {
    color: #fff;
    height: 45px;
    line-height: 45px;
    background-color: #4089f0;
}

.tips {
    margin: 100rpx auto;
    background: #d2d2d2;
    width: 500rpx;
    border-radius: 10rpx;
    padding: 20rpx;
}

.text {
    color: #333;
}

.pageTypeBtn{
  border: 1px solid #4089f0 !important;
  background: #fff !important;
  color: #4089f0 !important;
}

.getCode {
  min-width: 170rpx;
  border: 0 !important;
  border-width: 0px;
  border-radius: 40rpx;
  height: 55rpx;
  line-height: 55rpx;
  /* min-width: 100px; */
  background-color: #4089f0;
  color: #fff;
  text-align: center;
  font-size: 12px;
}

button::after {
  border-color: transparent;
}

</style>
